<template>
  <view class="wrap">
    <view class="step-1" v-if="step==1 && (needComplete.includes(1) || needComplete.includes(2))" >
      <view class="tit">
        <view class="tit-1">请上传二代身份证</view>
        <view class="tit-2">请确保拍摄证件的清晰完整</view>
      </view>
      <view class="pic-box">
        <view class="pic-item" v-if="needComplete.includes(1)">
          <view class="item-border relative" @click="goCamera(1)">
              <image v-if="form.infoImg" :src="form.infoImg" mode="aspectFill"/>
              <image v-if="!form.infoImg" src="https://qn.ebaozu.cn/public/mini/user/id_infoImg.png" mode="aspectFill"/>
              <view v-if="!form.infoImg" class="tip absolute">
                <view class="tip-1">
                  <view class="ebao-iconfont ebao-jiajianzujianjiahao text--w111-fff"></view>
                </view>
                <view class="tip-2">
                  上传身份证人像面
                </view>
              </view>
          </view>
        </view>
        <view class="pic-item" v-if="needComplete.includes(1)">
          <view class="item-border relative" @click="goCamera(2)">
            <image v-if="form.emblemImg" :src="form.emblemImg" mode="aspectFill"/>
            <image v-if="!form.emblemImg" src="https://qn.ebaozu.cn/public/mini/user/id_emblemImg.png" mode="aspectFill"/>
            <view v-if="!form.emblemImg" class="tip absolute">
              <view class="tip-1">
                <view class="ebao-iconfont ebao-jiajianzujianjiahao text--w111-fff"></view>
              </view>
              <view class="tip-2">
                上传身份证国徽面
              </view>
            </view>
          </view>
        </view>
        <view class="pic-item" v-if="needComplete.includes(2)">
          <view class="item-border relative" @click="goCamera(3)">
            <image v-if="form.handsImg" :src="form.handsImg" mode="aspectFill"/>
            <image v-if="!form.handsImg" src="https://qn.ebaozu.cn/public/mini/user/id_handsImg.png" mode="aspectFill"/>
            <view v-if="!form.handsImg" class="tip absolute">
              <view class="tip-1">
                <view class="ebao-iconfont ebao-jiajianzujianjiahao text--w111-fff"></view>
              </view>
              <view class="tip-2">
                上传手持身份证照片
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="step-2" v-if="step==2">
      <view class="item-box" v-if="needComplete.includes(5) || needComplete.includes(4)">
        <view class="tit">
          资料填写
        </view>
        <view class="item-input" v-if="needComplete.includes(5)">
          <view>常用邮箱</view>
          <input v-model='form.email' class="input" placeholder='请输入'/>
        </view>
        <view class="item-input" v-if="needComplete.includes(4)" style="border:none">
          <view>常用手机号</view>
          <input v-model='form.mostPhone' class="input" placeholder='请输入'/>
        </view>
      </view>
      <view  v-if="needComplete.includes(3)">
        <view class="item-box" v-for="(item,index) in contactsList">
        <view class="tit">
          <span class="text-red mr-8" v-if="index==0 || index==1">*</span>
          联系人{{index+1}}
        </view>
        <view class="item-relation">
          <view>关系</view>
          <view class="relation">
            <view class="relation-item" :class="{'relation-item-check':item.relationship==relItem.name}" @click="changeRelation(item,relItem)" v-for="relItem in relation" :key="relItem.name">
              {{relItem.name}}
                <view class="check-box" v-if="relItem.name==item.relationship">
                <view class="check-bg"></view>
                <text class="ebao-iconfont ebao-duigou"></text>
              </view>
            </view>
          </view>
        </view>
        <view class="item-input">
          <view>姓名</view>
          <input v-model='item.name' class="input" placeholder='请输入'/>
          <view class="r" @click="choose(item)">选择通讯录</view>
        </view>
        <view class="item-input" style="border:none">
          <view>手机</view>
          <input v-model='item.phone' class="input" placeholder='请输入'/>
        </view>
      </view>
      </view>

    </view>
    <view class="bottom-box" v-if="step==1">
      <view class="btn" v-if="showBtn1" @click="next()">下一步</view>
      <view class="btn" v-if="!showBtn1" @click="save">保存</view>
    </view>
    <view class="bottom-box" v-if="step==2">
      <view class="btn btn-pre" v-if="showBtn2" @click="step=1">上一步</view>
      <view class="btn" @click="save">保存</view>
    </view>
  </view>
</template>

<script>
import {getUserInfo, userComplete, userDataConfig} from "@/api/user";

export default {
  data() {
    return {
      showBtn1:true,
      showBtn2:true,
      showSave:true,
      step:1,
      relation: [
        {
          name:'父母'
        },
        {
          name:'配偶'
        },
        {
          name:'其他'
        }
      ],
      guanxi: -1,
      nameDisabled: 0,
      cardIdDisabled: 0,
      anewType3: 0,
      anewType4: 0,
      anewType5: 0,
      is_audit: false,
      form:{
        realName:'',	// 姓名
        cardId:'',		// 身份证
        phone:'',		// 手机号
        handsImg: '',	// 手持身份证
        infoImg: '',	// 身份证正面
        emblemImg: '',	// 身份证反面
        contactsInfo:[
          {
            name:'', 			// 姓名
            phone:'' ,			// 手机
            relationship:'',	// 关系
          },
        ],
        email:'',		// 常用邮箱
        mostPhone:'',	// 常用手机号
      },
      contactsList:[
        {
          name:'', 			// 姓名
          phone:'' ,			// 手机
          relationship:'',	// 关系
        },
        {
          name:'', 			// 姓名
          phone:'' ,			// 手机
          relationship:'',	// 关系
        },
        {
          name:'', 			// 姓名
          phone:'' ,			// 手机
          relationship:'',	// 关系
        },
      ],
      infoImgDisabled:0, // 身份证正面 是否禁用
      emblemImgDisabled:0,  // 身份证反面 是否禁用
      handleDisabled:0,// 手持身份证 是否禁用

      needComplete:[] //需要完善的信息
    }
  },
  onLoad() {
    this.getUserInfo()
    this.userDataConfig()
    uni.$on('isUpdateCard', res => {
      const { type, base64 } = res
      if(type == 1) this.form.infoImg = base64
      if(type == 2) this.form.emblemImg = base64
      if(type == 3) this.form.handsImg = base64
    })

  },
  methods: {
    userDataConfig(){
      userDataConfig().then(res=>{
        if (res.status === 200) {
          this.needComplete = res.data.user_auth_config || []
          // 第一页不需要完善，直接第二页
          if( !this.needComplete.includes(1)&&!this.needComplete.includes(2)){
            this.showBtn2 = false
            this.step = 2
          }
          // 第二页不需要完善，直接显示保存按钮
          if(!this.needComplete.includes(3)&&!this.needComplete.includes(4)&&!this.needComplete.includes(5)){
            this.showBtn1 = false
          }
        }
      })
    },
    getUserInfo() {
      uni.showLoading({ title:'加载中...' })
      getUserInfo().then(res=>{
        let auth = {}
        if(res.data.auth) {
          auth = JSON.parse(res.data.auth)
          if(auth.infoImg)  this.infoImgDisabled = 1
          if(auth.emblemImg)  this.emblemImgDisabled = 1
          if(auth.handsImg)  this.handleDisabled = 1
        }
        if(res.data){
          // 填充信息
          this.form.realName = res.data.real_name
          this.form.cardId = res.data.card_id
          this.form.phone = res.data.phone
          this.form.infoImg=auth?.infoImg
          this.form.emblemImg=auth?.emblemImg
          this.form.handsImg=auth?.handsImg
          if(res.data.contacts_info){
            let contactsInfo = JSON.parse(res.data.contacts_info)
            contactsInfo.forEach((item,index)=>{
              this.contactsList[index]=item
            })
          }
          this.form.email= res.data.email.trim()
          this.form.mostPhone= res.data.most_phone.trim()
        }
      }).finally(() => { uni.hideLoading() })
    },
    changeRelation(item,relItem){
      if(relItem.name==item.relationship){
        item.relationship=''
      }else{
        item.relationship=relItem.name
      }
    },
    goCamera:function(card_type){
      if(this.infoImgDisabled == 1 && this.form.infoImg && card_type == 1) return;
      if(this.emblemImgDisabled == 1 && this.form.emblemImg && card_type==2) return;
      if(this.handleDisabled == 1 && this.form.handsImg && card_type == 3) return;
      let param = '?type=' + card_type
      // 传身份证信息，用于正反面校验
      param+='&addData=1' //标记为补充资料
      uni.navigateTo({
        url: '/pages/users/card_camera/index'+ param,
      })
    },
    save(){
      if(!this.form.infoImg&&this.needComplete.includes(1)) return this.$util.Tips({ title: '请上传身份证人像照片' });
      if(!this.form.emblemImg&&this.needComplete.includes(1)) return this.$util.Tips({ title: '请上传身份证国徽照片' });
      if(!this.form.handsImg&&this.needComplete.includes(2)) return this.$util.Tips({ title: '请上传手持身份证照片' });
      if(!this.form.email&&this.needComplete.includes(5)) return this.$util.Tips({ title: '请输入常用邮箱' });
      if(!this.form.mostPhone&&this.needComplete.includes(4)) return this.$util.Tips({ title: '请输入常用手机号' });

      // 检测邮箱格式
      if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.form.email)&&this.needComplete.includes(5)){
        return this.$util.Tips({ title: '请输入正确的邮箱' });
      }
      // 检测手机号格式
      if(!/^1[3-9]\d{9}$/.test(this.form.mostPhone)&&this.needComplete.includes(4)){
        return this.$util.Tips({ title: '请输入正确的手机号' });
      }

      this.form.contactsInfo=[]
      this.contactsList.forEach((item,index)=>{
        // 只要有一个填了，就必须补充完整
        // 只要一个有值，就提交到表单校验
        if(item.relationship || item.name || item.phone){
          this.form.contactsInfo[index]= {...item}
        }
      })
      // 检测联系人
      if(this.needComplete.includes(3)){
        if(this.form.contactsInfo.length<2){
          return this.$util.Tips({ title: '至少填写2位联系人' });
        }
        for (let index in this.form.contactsInfo) {
          const item = this.form.contactsInfo[index]
          if(!item.relationship) return this.$util.Tips({ title: `请选择联系人${ parseInt(index)+1}关系` });
          if(!item.name) return this.$util.Tips({ title: `请填写联系人${parseInt(index)+1}姓名` });
          if(!item.phone) return this.$util.Tips({ title: `请填写联系人${parseInt(index+1)+1}手机号` });
          // 检测手机号格式
          if(!/^1[3-9]\d{9}$/.test(item.phone)){
            return this.$util.Tips({ title: `请输入联系人${parseInt(index)+1}正确的手机号` });
          }
        }
      }


      uni.showLoading({ title:'保存中...' })
      userComplete(this.form).then(res=>{
        uni.hideLoading()
        this.$util.Tips({ title: '保存成功' });
        setTimeout(() => {
          // uni.$emit('userInfoForm')
          uni.navigateBack();
        }, 1500)
      }).catch(err=>{
        return this.$util.Tips({ title: err });
      })
    },
    choose(item){
      my.choosePhoneContact({
        success: (res) => {
          item.name=res.name
          item.phone=res.mobile
          item.relationship='其他'
        }
      });
    },
    next(){
      // if(!this.form.infoImg&&this.needComplete.includes(1)) return this.$util.Tips({ title: '请上传身份证人像照片' });
      // if(!this.form.emblemImg&&this.needComplete.includes(1)) return this.$util.Tips({ title: '请上传身份证国徽照片' });
      // if(!this.form.handsImg) return this.$util.Tips({ title: '请上传手持身份证照片' });
      this.step=2
    }
  },
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-bottom: 200rpx;
}
.step-1{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 31px;
  .tit{
    text-align: center;
    margin-bottom: 15px;
    .tit-1{
      font-size: 22px;
      font-weight: bold;
    }
    .tit-2{
      margin-top: 10px;
      color: #999;
    }
  }
  .pic-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 52rpx;
    width: 100%;
    .pic-item{
      width: 100%;
      height: 420rpx;
      border: 2rpx dashed #72adff;
      border-radius: 32rpx;
      overflow: hidden;
      margin-bottom: 30rpx;
      .item-border {
        border: 18rpx solid #e4efff;
        height: 100%;
        border-radius: 32rpx;
        image{
          width: 100%;
          height: 100%;
        }
        .tip{
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          .tip-1{
            height: 104rpx;
            width: 104rpx;
            border-radius: 50%;
            background: #1677ff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20rpx;
          }
        }
      }
    }
  }
}
.step-2{
  padding: 20rpx;
  .item-box{
    margin-bottom: 20rpx;
    padding: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    .tit{
      margin-bottom: 20rpx;
      font-size: 30rpx;
      font-weight: bold;
    }
    .item-input,.item-relation{
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;
    }
    .item-relation{
      .relation{
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        .relation-item-check{
          background: #e8f5ff !important;
        }
        .relation-item{
          position: relative;
          text-align: center;
          width: 30%;
          height: 60rpx;
          line-height: 60rpx;
          background: #f5f5f5;
          border-radius: 20rpx;
          overflow: hidden;
          .check-box{
            .check-bg{
              width: 60rpx;
              height: 60rpx;
              bottom: -30rpx;
              right: -30rpx;
              background: #1777ff;
              position: absolute;
              transform: rotate(45deg);
            }
            .ebao-iconfont{
              position: absolute;
              bottom: 0;
              right: 0;
              line-height: 1;
              color: #fff;
            }
          }
        }
      }
    }
    .item-input{
      display: flex;
      align-items: center;
      .input{
        font-size: 30rpx;
        margin-left: 20rpx;
        flex:1;
      }
      .r{
        color: #1677ff;
      }
    }
  }
}
.bottom-box{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 30rpx 30rpx 60rpx;
  display: flex;
  .btn{
    width: 100%;
    background: #1677ff;
    height: 80rpx;
    color: #fff;
    font-size: 34rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 54rpx;
  }
  .btn-pre{
    margin-right: 30rpx;
    width: 40% !important;
  }
}
</style>